import React, { useEffect, useState } from 'react';
import { useDispatch } from 'umi';
import { userAdmin, userData, addUser } from '@/services/index';
import { Tabs, Input, Select, message, Button } from 'antd';
import './_addQusetions.less';
//ant表单样式
const info = () => {
  message.info('提交成功');
};
const { Option } = Select;
function handleChange(value: any) {
  console.log(`selected ${value}`);
}
const { TabPane } = Tabs;
function callback(key: any) {
  // console.log(key);
}
const AddUser: React.FC = () => {
  //用户身份id--userAdmin
  const [getUseridentity, setUseridentity] = useState<any[]>([]);
  //用户名id--userData
  const [getUserName, setUserName] = useState<any[]>([]);
  //添加用户--addUser
  const [getAddUser, setAddUser] = useState<any[]>([]);
  // 通过useDispatch拿到派发redux的dispatch
  const dispatch = useDispatch();
  //渲染身份id
  useEffect(() => {
    userAdmin().then((res) => {
      setUseridentity(res.data);
      //console.log(res.data);
    });
  }, []);
  //渲染用户id
  useEffect(() => {
    userData().then((res) => {
      setUserName(res.data);
      //console.log(res.data);
    });
  }, []);
  //添加数据
  useEffect(() => {
    addUser(user_name, user_pwd).then((res) => {
      setAddUser(res.data);
      debugger;
    });
  }, []);
  return (
    <div className="AddUser">
      <h1>添加用户</h1>
      <div className="top">
        {/**添加用户 */}
        <div className="div1">
          <Tabs onChange={callback} type="card">
            <TabPane tab="添加用户" key="1">
              {/**添加用户表单 */}
              <Input placeholder="请输入用户名" />
              <Input placeholder="请输入密码" />
              {/**选择器 */}
              <Select
                defaultValue="请选择身份ID"
                style={{ width: 150 }}
                onChange={handleChange}
              >
                {getUseridentity.map((item, index) => {
                  return (
                    <Option value={item.identity_id} key={index}>
                      {item.identity_text}
                    </Option>
                  );
                })}
              </Select>
              {/**确定提交按钮 */}
              <div>
                <Button type="primary" onClick={info}>
                  确定
                </Button>
                <Button>重置</Button>
              </div>
            </TabPane>
            {/**更新修改用户 */}
            <TabPane tab="更新用户" key="2">
              <div className="UserChanger">
                {/**选择器 */}
                <Select
                  defaultValue="请选择用户id"
                  style={{ width: 150 }}
                  onChange={handleChange}
                >
                  {getUserName.map((item, index) => {
                    return (
                      <Option value={item.user_id} key={index}>
                        {item.user_name}
                      </Option>
                    );
                  })}
                </Select>
                {/**添加用户表单 */}
                <Input placeholder="请输入用户名" />
                <Input placeholder="请输入密码" />
                {/**选择器 */}
                <Select
                  defaultValue="请选择身份id"
                  style={{ width: 150 }}
                  onChange={handleChange}
                >
                  {getUseridentity.map((item, index) => {
                    return (
                      <Option value={item.identity_id} key={index}>
                        {item.identity_text}
                      </Option>
                    );
                  })}
                </Select>
                <div>
                  <Button type="primary" onClick={info}>
                    确定
                  </Button>
                  <Button>重置</Button>
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
        {/* 添加身份*/}
        <div className="div2">
          <Tabs onChange={callback} type="card">
            <TabPane tab="添加身份" key="1">
              {/**添加用户表单 */}
              <Input placeholder="请输入身份名称" />
              {/**确定提交按钮 */}
              <div>
                <Button type="primary" onClick={info}>
                  确定
                </Button>
                <Button>重置</Button>
              </div>
            </TabPane>
          </Tabs>
        </div>
        {/* 添加api接口权限*/}
        <div className="div3">
          <Tabs onChange={callback} type="card">
            <TabPane tab="添加api接口权限" key="1">
              {/**添加用户表单 */}
              <Input placeholder="请输入api接口权限名称" />
              <Input placeholder="请输入api接口权限url" />
              <Input placeholder="请输入api接口权限方法" />
              {/**确定提交按钮 */}
              <div>
                <Button type="primary" onClick={info}>
                  确定
                </Button>
                <Button>重置</Button>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
      <div className="maller">
        {/**添加视图接口权限*/}
        <div className="div4">
          <Tabs onChange={callback} type="card">
            <TabPane tab="添加视图接口权限" key="1">
              {/**选择器 */}
              <Select
                defaultValue="请选择已有视图"
                style={{ width: 150 }}
                onChange={handleChange}
              >
                <Option value="请选择身份id"> </Option>
              </Select>
              {/**确定提交按钮 */}
              <div>
                <Button type="primary" onClick={info}>
                  确定
                </Button>
                <Button>重置</Button>
              </div>
            </TabPane>
          </Tabs>
        </div>
        {/**给身份设置api接口权限*/}
        <div className="div5">
          <Tabs onChange={callback} type="card">
            <TabPane tab="给身份设置api接口权限" key="1">
              {/**选择器 */}
              <Select
                defaultValue="请选择身份id"
                style={{ width: 150 }}
                onChange={handleChange}
              >
                <Option value=""> </Option>
              </Select>
              {/**选择器 */}
              <Select
                defaultValue="请选择api接口权限"
                style={{ width: 150 }}
                onChange={handleChange}
              >
                <Option value="请选择身份id"> </Option>
              </Select>
              {/**确定提交按钮 */}
              <div>
                <Button type="primary" onClick={info}>
                  确定
                </Button>
                <Button>重置</Button>
              </div>
            </TabPane>
          </Tabs>
        </div>
        {/**给身份设置视图权限*/}
        <div className="div6">
          <Tabs onChange={callback} type="card">
            <TabPane tab="给身份设置视图权限" key="1">
              {/**选择器 */}
              <Select
                defaultValue="请选择身份ID"
                style={{ width: 150 }}
                onChange={handleChange}
              >
                <Option value="请选择身份id"> </Option>
              </Select>
              {/**选择器 */}
              <Select
                defaultValue="请选择视图权限id"
                style={{ width: 150 }}
                onChange={handleChange}
              >
                <Option value="请选择身份id"> </Option>
              </Select>
              {/**确定提交按钮 */}
              <div>
                <Button type="primary" onClick={info}>
                  确定
                </Button>
                <Button>重置</Button>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  );
};

export default AddUser;
function identity_id(user_name: any, user_pwd: any, identity_id: any) {
  throw new Error('Function not implemented.');
}

function user_pwd(
  user_name: any,
  user_pwd: any,
  identity_id: (user_name: any, user_pwd: any, identity_id: any) => void,
) {
  throw new Error('Function not implemented.');
}

function user_name(
  user_name: any,
  user_pwd: (
    user_name: any,
    user_pwd: any,
    identity_id: (user_name: any, user_pwd: any, identity_id: any) => void,
  ) => void,
  identity_id: (user_name: any, user_pwd: any, identity_id: any) => void,
) {
  throw new Error('Function not implemented.');
}
